<template>
    <div class="team-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="队伍名称">{{ team.name }}</el-descriptions-item>
        <el-descriptions-item label="队伍状态">
          <el-tag :type="getStatusTag(team.status)">{{ team.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="成员数量">{{ team.members }}人</el-descriptions-item>
        <el-descriptions-item label="车辆数量">{{ team.vehicles }}辆</el-descriptions-item>
        <el-descriptions-item label="平均响应时间">{{ team.responseTime }}分钟</el-descriptions-item>
        <el-descriptions-item label="当前位置">{{ team.location }}</el-descriptions-item>
      </el-descriptions>
  
      <div class="speciality-section">
        <h4>专业技能</h4>
        <div class="speciality-tags">
          <el-tag 
            v-for="(spec, index) in team.speciality" 
            :key="index"
            type="info"
            class="tag"
          >
            {{ spec }}
          </el-tag>
        </div>
      </div>
  
      <div class="equipment-section">
        <h4>主要装备</h4>
        <el-table :data="equipmentData" style="width: 100%">
          <el-table-column prop="name" label="装备名称" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="status" label="状态">
            <template slot-scope="{row}">
              <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import { Descriptions, DescriptionsItem, Tag, Table, TableColumn } from 'element-ui';
  
  interface RescueTeam {
    id: string;
    name: string;
    members: number;
    vehicles: number;
    responseTime: number;
    status: '待命' | '任务中' | '休整';
    speciality: string[];
    location: string;
  }
  
  interface Equipment {
    name: string;
    type: string;
    quantity: number;
    status: '正常' | '维修中';
  }
  
  @Component({
    components: {
      ElDescriptions: Descriptions,
      ElDescriptionsItem: DescriptionsItem,
      ElTag: Tag,
      ElTable: Table,
      ElTableColumn: TableColumn
    }
  })
  export default class TeamDetail extends Vue {
    @Prop({ required: true }) private team!: RescueTeam;
  
    private equipmentData: Equipment[] = [
      { name: '救生艇', type: '水上救援', quantity: 3, status: '正常' },
      { name: '急救箱', type: '医疗设备', quantity: 5, status: '正常' },
      { name: '发电机', type: '电力设备', quantity: 2, status: '维修中' },
      { name: '无人机', type: '侦查设备', quantity: 1, status: '正常' },
      { name: '担架', type: '救援设备', quantity: 4, status: '正常' }
    ];
  
    private getStatusTag(status: string): string {
      const statusMap: Record<string, string> = {
        '待命': 'success',
        '任务中': 'warning',
        '休整': 'info'
      };
      return statusMap[status] || '';
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .team-detail {
    .speciality-section {
      margin: 20px 0;
      
      h4 {
        margin: 10px 0;
        color: #606266;
      }
      
      .speciality-tags {
        .tag {
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
    
    .equipment-section {
      h4 {
        margin: 10px 0;
        color: #606266;
      }
    }
  }
  </style>